<template>
  <!-- 弹窗 -->
  <el-dialog
    title="添加附件"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    @opened="initData"
  >
    <div class="fileUpload">
      <UploadFile
        ref="uploadFile"
        @pushFile="pushFile"
        :files="fileList"
        @percent="fliePercent"
      />
      <el-table :data="imageStrArr" border style="width: 100%">
        <el-table-column prop="name" label="文件名"> </el-table-column>
        <el-table-column prop="" label="状态">
          <template>
            <el-progress :percentage="progressBar"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >查看</el-button
                    > -->
            <el-button type="text" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn">
      <el-button type="primary" @click="sureAdd">确定添加</el-button>
      <el-button type="warning" @click="delAdd">取消添加</el-button>
    </div>
  </el-dialog>
</template>
<script>
import UploadFile from "@/components/UploadFile";

export default {
  data() {
    return { imageStrArr: [], fileList: "", progressBar: "" };
  },
  components: {
    UploadFile,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      this.form = {};
    },

    // 确定添加
    sureAdd() {
      if ((this.imageStrArr.length > 0)) {
        if (this.progressBar != 100) {
          this.$message.error("附件正在上传，请稍后...");
        } else {
          this.$emit("addFile", this.imageStrArr);
          this.$emit("closeDialog");
        }
      } else {
        this.$message.error("请选择上传附件");
      }
    },

    // 图片删除
    del(val) {
      this.imageStrArr.forEach((item, i) => {
        if (val.name == item.name) this.imageStrArr.splice(i, 1);
      });
    },

    // 取消添加
    delAdd() {
      this.imageStrArr = [];
      this.$emit("closeDialog");
    },

    // 上传文件拼接表格
    pushFile(file) {
      // let imagesUrl = "http://192.168.23.221:19000/";
      // this.imageStrArr.push({
      //   name: file.name,
      //   path: file.response.data,
      //   url: imagesUrl + file.response.data,
      //   size: file.size,
      // });

      this.imageStrArr.push({
        name: file.name,
        size: file.size,
        path: file.response.path,
        url: file.response.url,
        progressBar: file.progressBar,
      });

      // file.response.data.forEach((item) => {
      // this.imageStrArr.push({
      //   name: item.fileName,
      //   path: item.fileUrl,
      //   url: staticImgUrl + item.fileUrl,
      // });
      // });
    },

    // 文件上传成功的函数
    fliePercent(data) {
      this.progressBar = data.percent;
    },

    initData() {},
  },
};
</script>
<style lang="scss" scoped>
.btn {
  margin-top: 15px;
  text-align: center;
}
</style>
